<template>
  <div class="p-8 flex justify-center items-center">
    <div class="w-800px mx-auto bg-white/10 backdrop-blur-md p-8 rounded-lg shadow-lg border border-white/20 flex flex-col h-138">
      <h1 class="text-2rem font-bold mb-4 text-center text-white">意见反馈</h1>

      <!-- Feedback Submission Form -->
      <div v-if="!showHistory" class="flex flex-col flex-1 overflow-hidden">
        <div class="flex justify-between items-center mb-4 border-b border-white/30 pb-2">
          <h2 class="text-2xl font-semibold text-white">提交新反馈</h2>
          <a href="#" @click.prevent="showHistory = true" class="text-sm text-blue-300 hover:text-blue-200 hover:underline">
            查看历史反馈
            <span aria-hidden="true"> &rarr;</span>
          </a>
        </div>
        <div class="flex-1 overflow-y-auto pr-4 -mr-4">
          <form @submit.prevent="submitFeedback">
            <div class="mb-6">
              <label for="feedback-type" class="block font-medium mb-2 text-white">反馈类型</label>
              <select
                id="feedback-type"
                v-model="newFeedback.type"
                class="w-full p-3 border border-white/30 rounded text-base transition-colors duration-200 focus:outline-none focus:ring-1 bg-white/10 backdrop-blur-sm text-white"
              >
                <option value="BUG" class="bg-gray-800 text-white">问题反馈</option>
                <option value="SUGGESTION" class="bg-gray-800 text-white">功能建议</option>
                <option value="OTHER" class="bg-gray-800 text-white">其他</option>
              </select>
            </div>
            <div class="mb-6">
              <label for="feedback-content" class="block font-medium mb-2 text-white">反馈内容</label>
              <textarea
                id="feedback-content"
                v-model="newFeedback.content"
                placeholder="请详细描述您的问题或建议..."
                rows="5"
                maxlength="300"
                required
                class="w-full p-3 border border-white/30 rounded text-base transition-colors duration-200 focus:outline-none focus:border-transparent focus:ring-0 resize-none bg-white/10 backdrop-blur-sm text-white placeholder-white/60"
              ></textarea>
            </div>
            <div class="flex items-center justify-center">
              <CButton type="submit" :loading="isSubmitting" class="w-48! lh-7">提交反馈</CButton>
            </div>
          </form>
        </div>
      </div>

      <!-- Feedback History -->
      <div v-else class="flex flex-col flex-1 overflow-hidden">
        <div class="flex justify-between items-center mb-4 border-b border-white/30 pb-2">
          <h2 class="text-2xl font-semibold text-white">历史反馈</h2>
          <a href="#" @click.prevent="showHistory = false" class="text-sm text-blue-300 hover:text-blue-200 hover:underline">
            <span aria-hidden="true">&larr; </span>
            提交新反馈
          </a>
        </div>
        <div class="flex-1 overflow-y-auto pr-4 -mr-4">
          <div v-if="isLoading">
            <Loading />
          </div>
          <div v-else-if="feedbackHistory.length === 0" class="text-center p-8 text-white/70">暂无历史反馈记录。</div>
          <div v-else class="flex flex-col gap-4">
            <div
              v-for="item in feedbackHistory"
              :key="item.id"
              class="text-3.5 border border-white/20 rounded-md p-4 bg-white/10 backdrop-blur-sm transition-shadow duration-200 hover:shadow-lg hover:bg-white/15"
            >
              <div class="flex justify-between items-center mb-3">
                <span class="font-semibold text-white">{{ feedbackTypeMap[item.type] }}</span>
                <span :class="['py-1 px-3 rounded-full text-sm font-medium text-white ', solveTypeClassMap[item.solveType]]">
                  {{ solveTypeMap[item.solveType] }}
                </span>
              </div>
              <p class="text-white/90 mb-3 whitespace-pre-wrap">{{ item.content }}</p>
              <p class="text-sm text-white/60 text-right mb-3">{{ item.createTime }}</p>
              <div v-if="item.replyContent" class="bg-white/20 border-l-4 border-blue-300 p-3 mt-3 rounded backdrop-blur-sm">
                <strong class="text-blue-200 block mb-1">官方回复:</strong>
                <p class="text-white/90 m-0">{{ item.replyContent }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { queryCreateFeedBack, queryGetFeedbackList, FeedbackType, SolveType, type FeedbackItem } from '~/apis/feedback';
import CButton from '~/components/CButton.vue';
import Loading from '~/components/Loading.vue';
import { ElMessage } from 'element-plus';

useSEO({
  title: '意见反馈 - 球球助手',
  description: '向球球助手提交您的意见和建议，帮助我们改进服务',
  keywords: '意见反馈,问题反馈,功能建议,球球助手',
});

definePageMeta({ title: '意见反馈' });

const feedbackTypeMap = {
  [FeedbackType.BUG]: '问题反馈',
  [FeedbackType.SUGGESTION]: '功能建议',
  [FeedbackType.OTHER]: '其他',
};

const solveTypeMap = {
  [SolveType.UNSOLVED]: '未解决',
  [SolveType.SOLVED]: '已解决',
  [SolveType.IGNORE]: '已忽略',
};

const solveTypeClassMap = {
  [SolveType.UNSOLVED]: 'bg-gray-400',
  [SolveType.SOLVED]: 'bg-green-500',
  [SolveType.IGNORE]: 'bg-red-500',
};

const newFeedback = ref({
  type: FeedbackType.BUG,
  content: '',
});

const feedbackHistory = ref<FeedbackItem[]>([]);
const isLoading = ref(true);
const isSubmitting = ref(false);
const showHistory = ref(false);

async function fetchFeedbackHistory() {
  isLoading.value = true;
  try {
    const { data } = await queryGetFeedbackList();
    feedbackHistory.value = data || [];
  } finally {
    isLoading.value = false;
  }
}

// 提交反馈
async function submitFeedback() {
  if (!newFeedback.value.content.trim()) {
    ElMessage.error('反馈内容不能为空！');
    return;
  }
  isSubmitting.value = true;
  try {
    await queryCreateFeedBack(newFeedback.value);
    // You might want to use a proper notification component here
    ElMessage.success('反馈提交成功！');
    newFeedback.value.content = '';
    await fetchFeedbackHistory();
  } finally {
    isSubmitting.value = false;
  }
}

onMounted(() => {
  fetchFeedbackHistory();
});
</script>

<style scoped lang="scss">
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}
</style>
